<template>
  <view class="u-content">
    <view style="font-size: 34rpx; width: 100%; text-align: center; font-weight: bold">充值规则</view>
    <scroll-view scroll-y="true" style="height: 700rpx; width: 100%; padding: 20rpx; box-sizing: border-box">
      <view v-html="content"></view>
    </scroll-view>
    <view class="bottom">
      <uni-icons type="checkbox-filled" v-show="isChecked" color="#2979ff" @click="toggleCheck" size="24"></uni-icons>
      <uni-icons type="checkbox" v-show="!isChecked" color="#999" @click="toggleCheck" size="24"></uni-icons>
      <view style="margin-left: 10rpx">
        我已
        <text style="color: #2979ff; margin: 0px 5rpx">阅读并同意</text>
        该协议
      </view>
    </view>
    <view @click="confirm()" class="bottoms">确认</view>
  </view>
</template>

<script setup lang="ts">
import { authorMe } from '@/gql/user';
import { showToast } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import { ref } from 'vue';
// static
const content = ref('');
// data
const isChecked = ref(false);

function getContent() {
  const payload = {
    query: authorMe,
    variables: { code: 'czxz' },
  };
  toPublish('ql/driver/getMyblock', payload, (obj: any) => {
    const { data } = obj;
    content.value = data.get_myblock.content;
  });
}
getContent();

function toggleCheck() {
  isChecked.value = !isChecked.value;
}

const emit = defineEmits(['confirm']);

function confirm() {
  if (isChecked.value) {
    const time = new Date();
    const times = time.getDate();
    uni.setStorageSync('agreens', times);
    emit('confirm');
  } else {
    showToast('请阅读并同意该协议');
  }
}
</script>

<style scoped lang="less">
.u-content {
  width: 90vw;
  margin: 0 auto;
  border-radius: 5px;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;

  .bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .bottoms {
    margin: 20px auto 30rpx;
    width: 120px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(69deg, #41a3ff 0%, #1b91ff 100%);
    border-radius: 5px;
    font-size: 18px;
    color: white;
    letter-spacing: 2px;
  }
}
</style>
